import moment from 'moment';
import PropTypes from 'prop-types';
import React from 'react';
import styles from './style.less';

class MilepostC extends React.PureComponent {
  // props默认值
  // eslint-disable-next-line react/static-property-placement
  static defaultProps = {
    data: [],
    type: undefined, // 是否只是展示，非进度条，默认进度条
    isForBuyOrCallRule: false, // 买入赎回用
  };

  constructor(props) {
    super(props);

    this.state = {};
  }

  componentDidMount() {
    // 父组件对本组件的引用
    // this.props.onRef(this);
  }

  render() {
    const { data, type, isForBuyOrCallRule } = this.props;
    const num = parseFloat(100 / data.length); // 每份长度
    let scaleX = 0; // 已到期的长度
    if (type == 'view') {
      // 仅展示用
      scaleX = 1;
    } else {
      const arr = data.filter((item, key) => {
        item.key = key;
        if (moment(item.date) > moment()) {
          item.isGray = true; // 设置背景色
        }
        return moment(item.date) > moment();
      });
      scaleX = arr.length ? parseFloat((arr[0].key * num) / 100) : 1;
    }
    const widthProcess = ((data.length - 1) / data.length) * 100;
    return (
      <div style={{ height: '130px' }}>
        {isForBuyOrCallRule ? (
          <div style={{ height: '130px' }}>
            <div className={styles.time_box}>
              <div>
                <div className={styles.time_line_p}>
                  <ul className={styles.time_horizontal_p}>
                    {data.length &&
                      data.map((item, key) => (
                        // eslint-disable-next-line react/no-array-index-key
                        <li key={key} style={{ width: `${num}%` }}>
                          <span className={item.isGray ? styles.grayDate : styles.blueDate} style={item.isGray ? {} : { color: '#fff' }}>
                            {item.name}
                          </span>
                          <b />
                          {/* <img src={item.isGray?grayPng:yellowPng}></img><b></b>                */}
                          {item.date}
                        </li>
                      ))}
                  </ul>
                  <span className={styles.filling_line_p} style={{ transform: `scaleX(${scaleX})`, width: `${widthProcess}%` }} />
                </div>
              </div>
            </div>
          </div>
        ) : (
          <div className={styles.time_box}>
            <div>
              <div className={styles.time_line}>
                <ul className={styles.time_horizontal}>
                  {data.length &&
                    data.map((item, key) => (
                      // eslint-disable-next-line react/no-array-index-key
                      <li key={key} style={{ width: `${num}%` }}>
                        <span className={item.isGray ? styles.grayDate : styles.yellowDate}>{item.name}</span>
                        <b />
                        {/* <img src={item.isGray?grayPng:yellowPng}></img><b></b>                */}
                        {item.date}
                      </li>
                    ))}
                </ul>
                <span className={styles.filling_line} style={{ transform: `scaleX(${scaleX})` }} />
              </div>
            </div>
          </div>
        )}
      </div>
    );
  }
}

// props类型
MilepostC.propsTypes = {
  data: PropTypes.array, // 显示数据 [{name:'xx',date:'2020-11-11'}]
  type: PropTypes.string, // 展示类型 type:view
};

export default MilepostC;
